<template>
  <div class="goods">
    <nav-bar :isBack="true"></nav-bar>
    <van-list class="box" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="20">
      <ul>
        <li v-for="item in goodsList" :key="item.goods_id" @click="goDetail(item.goods_id)">
          <img :src="item.goods_small_logo ? item.goods_small_logo : require('../assets/img/logo.png')" alt="">
          <section>
            <h4>{{ item.goods_name }}</h4>
            <p>￥{{ item.goods_price }}</p>
          </section>
        </li>
      </ul>
    </van-list>
  </div>
</template>
<script>
import { getGoods } from '@/api/other/index';
export default {
  data() {
    return {
      goodsList: [], // 商品列表的数据
      loading: false, // 加载的loading
      finished: false, // 没有更多数据的时候，值应该为true;
      pagenum: 1, // 当前页码
      total: 0, // 总条数
    }
  },
  created() {


  },
  methods: {
    onLoad() { // 当滚动条滚动到底部的时候出发的事件
      // pagenum 当前的页码 pagesize 每页显示多少条数据
      let goodid = this.$route.query.id; // 路由传参传入的id;
      getGoods({ cid: goodid, pagenum: this.pagenum, pagesize: 10 }).then(res => {
        this.goodsList = [...this.goodsList, ...res.message.goods];
        this.loading = false;
        this.total = res.message.total;
        if (this.goodsList.length >= this.total) {
          this.finished = true; // 完成数据的加载，不需要在加载更多了
        } else {
          this.pagenum++;
        }
      })
    },
    goDetail(id) { // 点击跳转到详情页面的函数
      this.$router.push(`/detail/${id}`);
    }
  },
}
</script>
<style lang="scss" scoped>
.goods {
  height: 100%;
}

.box {
  height: calc(100% - 50px);
  overflow: auto;
  background-color: #fff;

  li {
    display: flex;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #ccc;

    img {
      width: 70px;
      margin-right: 10px;
    }

    section {
      flex: 1;

      h4 {
        font-size: 15px;
      }

      p {
        font-size: 15px;
        color: red;
        margin-top: 10px;
      }
    }
  }
}
</style>